<template>
   <div class="list-upload-box">
    <div class="list-upload c-shadow clearFix">
      <ul class='clearFix'>
        <router-link class="nav-item" tag='li' to='/sysManage/filesUpload' active-class="selected">企业文件上传</router-link>
        <router-link class="nav-item" tag='li' to='/sysManage/listUpload' active-class="selected">企业文件列表</router-link>
      </ul>
    </div>
    <div class="list-sc">
      <div class="list-search c-shadow clearFix">
      <div class="list-warn fl">
        <label>企业名称：</label>
        <el-input class="warn-main" placeholder="请输入企业名称" v-model="filterData.entNameLike"></el-input>
      </div>
      <div class="mgl-50 date-picker warn-time fl">时间范围：
        <j-date-picker v-model="filterData.ptStartTime" :max="maxTime" @change="fliterChange('t')"></j-date-picker>
        <span class="space-mark">-</span>
        <j-date-picker v-model="filterData.ptEndTime" :min="filterData.ptStartTime" :max="curTime" @change="fliterChange('t')"></j-date-picker>
      </div>
      <div class="list-warn warn-time fl">
        <label>上传用户：</label>
        <el-input class="warn-main" placeholder="" v-model="filterData.userName"></el-input>
      </div>
      <button type="button" class="el-button el-button--primary ent-button fr" @click="search">
        <span><i class="iconfont icon-search ent-search"></i> 检索</span>
      </button>
      </div>
      <div class="list-table c-shadow clearFix">
        <j-loading mode='s' v-show="isShowLoading"></j-loading>
        <table class="table-fixed" width="100%" border="0" cellspacing="0" cellpadding="0">
            <thead>
              <th width='5%'>序号</th>
              <th width='15%'>企业名称</th>
              <th colspan="6"  class="text-center">
                <table width='100%'>
                  <thead>
                    <th width='10%'>文件类型</th>
                    <th width='20%'>文件名称</th>
                    <th width='15%'>上传时间</th>
                    <th width='15%'>上传用户</th>
                    <th width='15%'>备注</th>
                    <th width='25%'>操作</th>
                  </thead>
                </table>
              </th>
            </thead>
            <tr v-for="(lists,index) in entList" :key="lists.entName">
            <td  width='5%' class="text-center">{{index+1}}</td>
            <td  width='5%' class="primary" :title="lists.entName">{{lists.entName}}</td>
            <td colspan="6">
              <table width="100%">
                <tr v-for="(item,idx) in lists.fileList" :key="idx.fileName">
                  <td class="" width='10%'>{{item.fileType}}</td>
                  <td class="" width='20%' :title="item.fileName">{{item.fileName}}</td>
                  <td class="text-center" width='15%'>{{item.uploadTm | dateFormat}}</td>
                  <td class="text-center" width='15%'>{{item.userName}}</td>
                  <td class="text-center" width='15%'>{{item.uplodeDescribe}}</td>
                  <td class="text-center option" width='25%'>
                    <!-- type:0 没有文件，type:1 图片，type:2 文件 -->
                    <template v-if="item.type!=0">
                      <span @click="down(item.uploadFileUrl)">下载</span>
                      <span @click="look(item.uploadFileUrl,item.type)" v-if="item.type === 1">预览</span>
                    </template>
                    <span @click="upload(item.id)">重新上传</span>
                    <span @click="del(item.id)">删除</span>
                  </td>
                </tr>
              </table>
            </td>
            </tr>
          </table>
          <j-no-data :mode="'b'" msg="a" v-if="entList.length === 0 && !isShowLoading"></j-no-data>
      </div>
      <div class="block paging-wrap fr clearFix">
        <el-pagination v-if="filterData.total>10"
          @size-change="handleSizeChange"
          @current-change="paging"
          :current-page.sync="filterData.pageNum"
          :page-size.sync="filterData.pageSize"
          :total.sync="filterData.total"
          layout="prev, pager, next, jumper">
        </el-pagination>
      </div>
    </div>
    <jDialog :initShow="jDialog" initTitle="详情" @closing="resetShow"></jDialog>
    <el-dialog title="图片详情" :visible.sync="show" width="80%">
      <img :src="imgurl" width="95%">
    </el-dialog>
    <jConfirm :initShow="jConfirm"></jConfirm>
  </div>
</template>
<script>
import { jDatePicker, jNoData, jLoading, jDialog, jConfirm } from '../../components'
import { sysManage as api } from '../../api'
export default {
  components: { jDatePicker, jNoData, jLoading, jDialog, jConfirm },
  data() {
    return {
      jDialog: false,
      jConfirm: false,
      isShowLoading: false,
      entList: [],
      imgurl:'',
      show:false,
      filterData: {
        pageSize: 10,
        pageNum: 1,
        total: 0,
        ptStartTime: '',
        ptEndTime: '',
        userName: null,
        entNameLike: null
      }
    }
  },
  methods: {
    // 关闭dialog
    resetShow(blur) {
      this.jDialog = blur.cancleClose
    },
    // 过滤
    search() {
      this.filterData.pageNum = 1
      this.getData()
    },
    // 删除列表项
    del(idx) {
      this.confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((ret) => {
        let params = {id: idx}
        if (ret === 'confirm') {
          api.delDataUpload(params).then(res => {
            this.tips(res.msg, 'success')
            this.getData()
          }).catch(res => {
            this.tips('失败：' + res.msg, 'error')
          })
        }
      }).catch(() => {})
    },
    // 图像与文件预览
    look(url, type) {
      this.imgurl = window.api_host + '/entDataUpload/downPicture?uploadFileUrl=' + encodeURI(encodeURI(url))
      this.show = true
      // window.open(url)
    },
    // 跳转重新上传文件页面
    upload(idx) {
      this.$router.push({path: 'filesUpload', query: {id: idx, edit: true}})
    },
    // 下载文件
    down(url) {
      location.href = window.api_host + '/entDataUpload/downPicture?uploadFileUrl=' + encodeURI(encodeURI(url))
    },
    // 获取列表数据
    getData() {
      let params = this.filterData
      this.isShowLoading = true
      api.getDataUploadList(params).then(res => {
        this.entList = res.data.list
        // console.log(res.data)
        this.filterData.total = res.data.total
        this.isShowLoading = false
      }).catch(res => {
        this.isShowLoading = false
        this.tips('失败：' + res.msg, 'warning')
      })
    },
    fliterChange() {
      console.log('changeTimes')
    },
    handleSizeChange() {
      console.log('changesize')
    },
    // 翻页
    paging(value) {
      console.log(value)
      this.filterData.pageNum = value
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  computed: {
    maxTime() {
      if ((new Date().valueOf() - new Date(this.filterData.ptEndTime).valueOf()) > 0) {
        return this.filterData.ptEndTime
      } else {
        return this.curTime
      }
    },
    curTime() {
      let date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() > 9 ? (date.getMonth() + 1) : ('0' + (date.getMonth() + 1))
      let day = date.getDate() > 9 ? date.getDate() : ('0' + date.getDate())
      return year + '-' + month + '-' + day
    }
  }
}
</script>
<style lang="scss" scoped>
.list-upload {
  padding-left: 20px;
  display: flex;
  /deep/ .el-dialog__body {
    text-align: center;
  }
  /deep/ .el-dialog__header {
    background: #379aff;
  }
  .selected {
    background: #e8f1fa;
    border-bottom: 3px solid #1470cc;
    color: #1470cc;
  }
  ul {
    width: 100%;
    display: flex;
    li {
      float: left;
      height: 52px;
      text-align: center;
      line-height: 52px;
      font-size: 16px;
      cursor: pointer;
      white-space: normal;
      width: 15%;
      border-bottom: 3px solid transparent;
      &:hover {
        background: #e8f1fa;
        border-bottom: 3px solid #1470cc;
        color: #1470cc;
      }
    }
  }
}
.list-search {
  height: 40px;
  padding: 36px 20px;
  margin-top: 35px;
  color: #999;
  .list-warn {
    vertical-align: middle;
    width: 220px;
    .warn-main {
      width: 140px;
      height: 36px;
    }
  }
  .warn-time {
    margin-left: 45px;
  }
  .ent-button {
    width: 131px;
    height: 34px;
    line-height: 0px;
  }
}
.list-table {
  position: relative;
  margin-top: 35px;
  padding: 20px;
  min-height: 500px;
  .table-fixed {
    width: 99%;
    margin: 0 auto;
    tr {
      height: auto;
      border-top: 1px solid transparent;
      .option{
        span{
          padding:0 3px;
          &:hover{
            color: #ff8a80;
          }
        }
      }
      &:hover {
        border-top: 1px solid #000;
      }
    }
    .primary{
      color: #379aff;
    }
    td:last-child span {
      color: #7c98bf;
      cursor: pointer;
      &.lock{
        color:#ccc
      }
    }
    td{
      height:auto;
      padding:4px 2px;
      tr{
        height:auto;
        &:hover{
          background:none;
        }
        &:nth-of-type(even) {
          background: none;
        }
        &:first-child{
          padding-top:10px;
        }
        td{
          height:auto;
        }
      }
    }

/**
    tr:hover {
     span:nth-child(3) {
        color: #ffa64d;
      }
      span:nth-child(4) {
        color: #ff8a80;
      }
      .option{
        span{
          padding:0 2px;
        }
      }
    }
**/
  }
}
.dialog{
  width:60%;
}
</style>



// WEBPACK FOOTER //
// src/view/sysManage/listUpload.vue